<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.css">
		<link rel="stylesheet" href="../css/common.css">
		<title>人员登记列表</title>
		<style>
			body,.mui-content{background:#fff;}
			.mui-search{width: 82%;margin:10px;}
			.p-search{display: flex;font-size: 14px;background-color:rgba(244, 244, 244, 1);height:54px;}
			.p-search input{background:#fff;}.mui-search::before{margin:-10px 0 0;}
			.p-search a{color:#09BB07;line-height:54px;height:54px;}.p-list{display: flex;}
			.job{font-size: 13px;color: #fff;background:#275EB1;
			width:56px;height:56px; text-align: center;line-height: 56px;border-radius: 50%;}
			.detail{border-bottom: 1px solid #eee;width: calc(100% - 80px);padding: 0 0 3px 10px;display: flex;flex-wrap: wrap;}.detail span{display: block;line-height: 30px;}
			.detail .a1,.detail .a3{width:60%}.detail .a1{font-size: 16px;font-weight: 800;}.detail .a2{color:#62625F;font-size: 13px;}
			.detail .a2,.detail .a4{width:40%;text-align: right;}.detail .a3{font-size: 14px;color: #62625F;line-height: 20px;}.detail .a4{color: #008FE0;font-size: 12px;}
			.p-list{padding:10px;background:#fff;}.more{position: fixed;right:5%;bottom:10%;}
			.detail .a4 font{color:#DE0015;padding:2px 5px;background:#F9E3E2;border-radius: 10px;}
			.detail .a4 font.inser{color: #fff;background: #0077DC;}
			.detail .a4 font.noinser{color: #fff;background: #996633;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">人员登记列表</h1>
		</header>
		<!--
		<div style="height:3vh;width:100%;"></div>
		-->
		<div class="mui-content" id="page" style="visibility: hidden;" v-cloak>
			<div class="mui-row p-search">
				<div class="mui-input-row mui-search">
					<input type="search" id="queryKeyword" v-model="listQuery.compelliation" class="mui-input-clear" placeholder="关键字">
				</div>
				<a class="mui-navigate-left" @click="search">搜索</a>
			</div>
			
			<div class="mui-row p-list" v-for="(ie,ii) in list" :key="'a+_'+ii" @click="detail(ie)">
				<div class="job">{{ie.compellation}}</div>
				<div class="detail">
					<span class="a1">{{ie.compellation}}</span>
					<span class="a2">{{ie.isLeader?'工作票负责人':''}}</span>
					<span class="a3">{{ie.enterpriseName|ellipsis(20)}}</span>
					<span class="a4" v-if="ie.departureTime"><font>离场</font></span>
					<span class="a4" v-else-if="ie.approachTime && !ie.departureTime"><font class="inser">已进场</font></span>
					<span class="a4" v-else><font class="noinser">未进场</font></span>
				</div>
			</div>
			
			<!--
			<div class="more"><img src="../img/more.svg"></div>
			-->	
		</div>
		<div class="mui-row" id="loadingTxt"></div>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script src="../js/mkeyplus.base.js"></script>
		<script src="../formal/js/api.js"></script>
		<script>
			var htapi = new HTGlobal();
			var _mui = undefined;
			var loadingTxt = mui('#loadingTxt');
			htapi.apiKey = 'group';
			mui.init({
			pullRefresh : {
				container:'#loadingTxt',
				up:{
					height:50,
					style: 'circle',
					auto: true,
					contentnomore: '没有更多数据了',
					contentrefresh: "正在加载...",
					callback:function(){
						_mui = this;
						page.listQuery.pageIndex++
						page.pload()
					}
				}
			}
		});
			mui.plusReady(function(){
				mui("body").on("tap", ".mui-icon-clear", function() {
					page.listQuery.compelliation = ''
				});
				
			});
			var page = new Vue({
				el:'#page',
				data:{
					listQuery:{
						pageIndex:0,
						pageSize:10,
						enterpriseProjectId:'',
						compelliation:''
					},
					list:[]
				},
				filters:{
					ellipsis(value,num){
						return htapi.ellipsis(value,num)
					}
				},
				methods:{
					pload(){
						var self = plus.webview.currentWebview();
						page.listQuery.enterpriseProjectId = self.enterpriseProjectId;
						htapi.fetch(page.listQuery,function(res){
							console.log(JSON.stringify(res));
							_mui.endPullupToRefresh(false);
							if(res.code =='0' && res.data){
								page.list = page.list.concat(res.data.list);
								var L = res.data.list.length
								if(!L || L<10){ //如果没有数据了
									loadingTxt.pullRefresh().endPullup(true);
								}
							}
						},false,'workUser')
					},
					detail(item){
						mui.openWindow({
							url:'./personnel_details.html',
							id:'./personnel_details.html',
							extras:{
								appUserId:item.appUserId,
								enterpriseProjectId:this.listQuery.enterpriseProjectId,
								ucid:item.id
							}
						})
					},
					search(){
						var txt = this.listQuery.compelliation;
						
							this.listQuery.pageIndex = 0;
							this.list = [];
							loadingTxt.pullRefresh().refresh(true);
							loadingTxt.pullRefresh().pullupLoading();
						
					}
				},
				created(){
					$('#page').css('visibility','inherit');
				}
			});
		</script>
	</body>
</html>
